import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myapp/api/http_manager.dart';
import 'package:myapp/util/colors_utils.dart';
import 'package:myapp/view_model/home_page_model.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  TextEditingController _etSearchController = TextEditingController();
  bool _searchEmpty = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(color: ColorUtils.color_bg_1),
        child: SafeArea(
          child: Column(
            children: [
              _searchView(),
              Expanded(child: SizedBox.shrink(),flex: 1,)
            ],
          ),
        ),
      ),
    );
  }

  void _setSearchEmpty(String value) {
    setState(() {
      _searchEmpty = value == null || value == "";
    });
  }

  Widget _searchView() {
    return Container(
      margin: EdgeInsets.only(top: 8, bottom: 8),
      height: 40,
      child: Row(
        children: [
          IconButton(
            icon: Icon(
              Icons.arrow_back,
              size: 20,
              color: ColorUtils.color_text_1,
            ),
            onPressed: () => {Navigator.pop(context)},
          ),
          Expanded(
              child: Container(
            decoration: BoxDecoration(
                color: ColorUtils.color_bg_3,
                borderRadius: BorderRadius.circular(32)),
            padding: EdgeInsets.only(left: 16),
            child: TextField(
              autofocus: true,
              onSubmitted: (value) => {showToast(value)},
              textInputAction: TextInputAction.search,
              textAlignVertical: TextAlignVertical.center,
              maxLines: 1,
              style: TextStyle(
                fontSize: 14,
                color: ColorUtils.color_text_1,
                textBaseline: TextBaseline.alphabetic,
              ),
              controller: _etSearchController,
              onChanged: (value) => _setSearchEmpty(value),
              decoration: InputDecoration(
                  hintText: "搜索",
                  hintMaxLines: 1,
                  suffixIcon: _searchEmpty
                      ? null
                      : IconButton(
                          icon: Icon(
                            Icons.close,
                            color: ColorUtils.color_text_3,
                            size: 10,
                          ),
                          onPressed: () {
                            _setSearchEmpty(null);
                            _etSearchController.clear();
                          },
                        ),
                  border: InputBorder.none,
                  hintStyle: TextStyle(
                    color: ColorUtils.color_text_3,
                  )),
            ),
          )),
          IconButton(
            onPressed: () {
              context.read<HomePageModel>().refresh();
            },
            icon: Icon(
              Icons.search,
              color: ColorUtils.color_text_1,
            ),
            iconSize: 20,
          ),
        ],
      ),
    );
  }
}
